import React from 'react';
import { ShopbagOutline, HeartOutline } from 'antd-mobile-icons';
import { useAppSelector } from '@/store';
import { GoodsBuyType } from './context';
import { bem } from '@/utils';
import { useNavigate, useParams } from 'react-router-dom';
import Btn from '@/components/button';
import TabBar from '@/components/tabBar';

export interface GoodsOperatorProps {
    onHandlerBuy?: (value: GoodsBuyType) => void;
    onHandlerCart?: (value: GoodsBuyType) => void;
}


const GoodsOperator: React.FC<GoodsOperatorProps> = (props) => {
    const { onHandlerBuy, onHandlerCart } = props;

    const b = bem('gd-buy-bar');
    const selectedAddress = useAppSelector(state => state.address.selectedAddress);
    const selectedSku = useAppSelector(state => state.sku.selectedSku);

    const navigate = useNavigate();

    const handlerBuy = () => {
        onHandlerBuy?.({
            address: selectedAddress,
            sku: selectedSku
        });
    };

    const handlerCart = () => {
        onHandlerCart?.({
            address: selectedAddress,
            sku: selectedSku
        });
    };

    return (
        <>
          
            { <TabBar>
                <TabBar.Item>
                    <div >
                        <ShopbagOutline fontSize={24} />
                    </div>
                    <div className='seal-tab-bar-item-text'>店铺</div>
                </TabBar.Item>

                <TabBar.Item>
                    <div>
                        <HeartOutline fontSize={24} />
                    </div>
                    <div className='seal-tab-bar-item-text'>购物车</div>
                </TabBar.Item>

                <TabBar.Item>
                    <div className={b('group')} >
                        <Btn btnTitle={'加入购物车'}
                            style={{ background: 'linear-gradient(135deg, rgb(255, 186, 13), rgb(255, 195, 13) 69%, rgb(255, 207, 13))' }}
                            onClick={() => { handlerCart() }}
                        />
                        <Btn
                            btnTitle={'立即购买'}
                            onClick={() => { handlerBuy() }}

                        />
                    </div>
                </TabBar.Item>
            </TabBar> }

        </>
    )
}

export default GoodsOperator;